import { colors } from '@/utils/colors'
import { Chart } from '@antv/g2'
export const drawLineChart = (option) => {
  const { container, width, height, data, position, unit = 'bar' } = option
  const chart = new Chart({
    width,
    height,
    container
  })

  chart.data(data)

  chart.legend({
    position: 'right-top'
  })

  chart.tooltip({
    showCrosshairs: true,
    crosshairs: {
      type: 'x',
      text: {
        style: {
          fontSize: 16
        }
      }
    },
    itemTpl: `<div class="g2-tooltip-list-item">
      <div class="g2-tool-tip-marker"></div>
      <div class="g2-tooltip-name">{name}:</div>
      <div class="g2-tooltip-value">{value} ${unit}</div>
      </div>`,
    domStyles: {
      'g2-tooltip-title': {
        textAlign: 'left'
      },
      'g2-tooltip-list-item': {
        display: 'flex',
        justifyContent: 'space-between'
      }
    }
  })
  const axis = position.split('*')
  const obj = {}
  obj[`${axis[0]}`] = {
    alias: '深度 (单位：m)'
  }
  obj[`${axis[1]}`] = {
    alias: `压力/${unit}`
  }
  chart.scale(obj)
  // chart.axis(axis[1], false)
  chart.axis(axis[1], {
    title: {
      style: {
        fontSize: 16
      }
    }
  })
  chart.axis(axis[0], {
    title: {
      style: {
        fontSize: 16
      }
    }
  })
  chart
    .area()
    // .adjust('stack')
    .position(position)
    .color('s', colors)
  chart
    .line()
    // .adjust('stack')
    .position(position)
    .color('s', colors)

  chart.interaction('element-highlight')

  chart.render()
  return chart
}
